<script setup>
import {onShow} from "@dcloudio/uni-app";
import {ref} from "vue";

const prop = defineProps({
  title: String,
  default: ""
})

const isShowBackHome = ref(false)

const goBack = () => {
  if (isShowBackHome.value) {
    uni.switchTab({url: '/pages/index/index'})
  } else {
    uni.navigateBack()
  }
}

onShow(() => {
  let pages = getCurrentPages()
  isShowBackHome.value = pages.length === 1;
})

</script>

<template>
  <u-navbar
      :title="prop.title"
      placeholder
      titleStyle="color:black"
      leftIconColor="#000"
      :auto-back="false"
  >
    <template #left>
      <up-icon
          v-if="!isShowBackHome"
          name="arrow-left"
          size="19"
          @click="goBack"
      ></up-icon>
      <view class="u-nav-slot" v-else @click="goBack">
        <up-icon
            name="arrow-left"
            size="19"
        ></up-icon>
        <up-line
            direction="column"
            :hairline="false"
            length="16"
            margin="auto 8px"
        ></up-line>
        <up-icon
            name="home"
            size="20"
        ></up-icon>
      </view>
    </template>
  </u-navbar>
</template>

<style scoped lang="scss">
.u-nav-slot {
  display: flex;
  border-radius: 60rpx;
  border: #888888 solid 1px;
  padding: 6rpx 16rpx;
}
</style>